import React, {
	Component
} from 'react';
import {
	observer,
} from 'mobx-react';
import {
	withRouter
} from 'react-router-dom';
import {
	RouteLayout
} from 'weaver-mobile-page';
import {
	WingBlank,
} from 'weaver-mobile';

@withRouter
@observer
export default class Balance extends Component {
	componentWillUnmount() {
		const {
			changeTitle,
			mainTitle
		} = this.props.store;

		changeTitle(mainTitle);
	}
	
	getBgImage = (index) => {
		const colors = [{
			start: "#A18DFC",
			end: "#8177FE"
		}, {
			start: "#72CEFF",
			end: "#478CE5"
		},{
			start: "#FFAD8C",
			end: "#FF7D3B"
		}];

		let data;
		if (index < 3) {
			data = colors[index];
		}else{
			data = this.getRandomColor();
		}

		const {start, end} = data;


		return `linear-gradient(-51deg, ${start} 0%, ${end} 100%)`;

	}

	getRandomColor = () => {
		const r = this.getRandomNumber(128, 256),
		g = this.getRandomNumber(128, 256),
		b = this.getRandomNumber(128, 256);

		return {
			start:`rgb(${r},${g},${b})`,
			end: `rgb(${r - 30},${g - 30},${b - 30})`
		}

	}

	getRandomNumber = (start, end) => {
		return parseInt(Math.random() * (end - start + 1) + start, 10)
	}

	render() {
		const {
			store
		} = this.props, {
			balance
		} = store;

		return (
			<RouteLayout>
				<div key="wmPoutePageDemo" className="wm-route-layout wm-demo-route-layout-page attendance-banlance">
					<WingBlank>
						{
							balance.map((data,index) => {
								const {item, title} = data;

								return (
									<div key={title}>
										<h4 style={{backgroundImage:this.getBgImage(index)}}>{title}</h4>
										<ul>
											{
												item.map(row => {
													const {title, value} = row;
													return (
														<li key={title}>
															<span>{title}</span>
															<span>{value}</span>
														</li>
													)
												})
											}
										</ul>
									</div>
								)
							})
						}
					</WingBlank>
				</div>
			</RouteLayout>
		);
	}
}